<template>
  <div Style="width: 100%;height: 100%">
    <!-- 标题-->
    <div>
      <a-page-header title="老师列表"/>
    </div>
    <div>
      <a-form layout="inline" :form="form" :labelCol="{md:{span:4},xs:{span:12}}" :wrapperCol="{
        md:{span:4},xs:{span:12}}">
        <a-form-item>
          <a-input v-model="inputAccount" placeholder="请输入工号查询" style="width: 250px;" :allowClear="true">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="inputName" placeholder="请输入名字查询" style="width: 250px;" :allowClear="true">
          </a-input>
        </a-form-item>
        <a-form-item>
          <div style="width: 400px;">
            <a-button type="primary" style="margin-right: 10px;" @click="searchTeacherInfo">
              查询
            </a-button>
<!--            <a-button style="margin-right: 10px;" @click="onResetSearch">重置</a-button>-->
            <a-button type="primary" style="margin-right: 10px;" @click="addTeacher">
              添加
            </a-button>
            <a-popconfirm
                title="是否批量删除选中的老师信息?"
                @confirm="() => onMassDeleteTeacher()"
                cancelText='取消'
                okText="确定"
                placement="bottom"
            >
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a-button type="danger">批量删除</a-button>
            </a-popconfirm>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <div style=" margin-top: 1em">
      <a-table
          :data-source="teacherData"
          :pagination="pagination"
          :rowSelection="rowSelection">
        <a-table-column title="工号" data-index="account" align="center" :sorter="(a,b)=>a.account-b.account"/>
        <a-table-column title="姓名" data-index="name" align="center" :sorter="(a,b)=>a.name.localeCompare(b.name)"/>
        <a-table-column title="学院" data-index="college" align="center" />
        <a-table-column title="密码" data-index="password" align="center"/>
        <a-table-column key="courseId" title="操作" align="center">
          <template slot-scope="record">
              <span>
                <a href="javascript:;" @click="getTeacherInfo(record.key)">查看</a>

                <span class="seize" style="margin-left: 1em"/>

                  <a-popconfirm title="确认删除该老师么?"
                      @confirm="() => deleteTeacher(record.key)">
                    <a href="javascript:;" style="color: red">删除</a>
                  </a-popconfirm>

                <span class="seize" style="margin-left: 1em"/>
                <a @click="showAlert(record.key)">编辑</a>
              </span>
          </template>
        </a-table-column>
        >
      </a-table>

      <!-- 点击查看弹出的对话框-->
      <a-modal
          v-model="modalVisible"
          title="老师详细信息"
          :destroyOnClose="true"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <div>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              工号：{{teacherRecord.account }}
            </a-col>
            <a-col :span="12">
              姓名：{{teacherRecord.name }}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              密码：{{teacherRecord.password }}
            </a-col>
            <a-col :span="12">
              学院：{{teacherRecord.college }}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              邮箱：{{teacherRecord.e_mail }}
            </a-col>
            <a-col :span="12">
              电话号码：{{teacherRecord.phone }}
            </a-col>
          </a-row>
        </div>
      </a-modal>
      <!--编辑弹窗-->
      <a-modal
          v-model="visible"
          title="编辑老师信息"
          centered
          @ok="editTeacher(teacherRecord)"
          @cancel="handleCancel"
      >
        <a-row style="text-align: left;">
          <a-col>
            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="工号">
                <a-input placeholder="工号"  v-model="teacherRecord.account"/>
              </a-descriptions-item>
            </a-descriptions>

            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="姓名">
                <a-input placeholder="姓名" v-model="teacherRecord.name"/>
              </a-descriptions-item>
            </a-descriptions>

            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="密码">
                <a-input placeholder="密码" v-model="teacherRecord.password"/>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="学院">
                <a-input placeholder="学院" v-model="teacherRecord.college" :disabled="true"/>
              </a-descriptions-item>
            </a-descriptions>

            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="邮箱">
                <a-input placeholder="邮箱" v-model="teacherRecord.e_mail"/>
              </a-descriptions-item>
            </a-descriptions>

            <a-descriptions style="width: 100%;text-align: left">
              <a-descriptions-item label="电话">
                <a-input placeholder="电话" v-model="teacherRecord.phone"/>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </a-modal>
      <addTeacher ref="addTe" @get="refreshPage"></addTeacher>
      <div>
      </div>
    </div>
  </div>

</template>

<script>
import {mapState} from "vuex";
import addTeacher from "./AddTea.vue";
export default {
  name: "TeacherList",
  components: {addTeacher},
  data() {
    return {
      form: this.$form.createForm(this, { name: 'teacher_search' }),
      //批量删除部分（复选框）
      delTeacher: [],
      teacherData: [],
      pagination: {
        total: 0,
        showTotal: total => `共 ${total} 条`,
        pageSizeOptions: ['5', '6', '7', '8', '9', '10'],
        defaultPageSize: 5,
        showSizeChanger: true,
      }, // 配置分页配置
      selectedRowKeys: [],
      teacherRecord: {
        teacherId: '',
        account: '', //工号
        name: '', //老师姓名
        password: '', //老师密码
        college: '',//学院
        e_mail: '',//邮箱
        phone: ''//电话
      },
      //动态绑定的表单输入值
      inputAccount: '',
      inputName: '',
      modalVisible: false,
      visible: false,
    }
  },
  methods: {
    addTeacher(){ // 添加老师
      this.$refs.addTe.showModel();
    },
    //获取的要编辑的选中的老师信息
    showAlert(key) {
      //调用接口
      this.$store.dispatch('teacherList/teacherInfo', {
        teacherId: key,
        token: this.accessState.token
      }).then(()=>{
        this.teacherRecord=this.teacherState.teacherInfo
        this.visible=true
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    //编辑修改选中老师信息
    editTeacher(teacherRecord) {
      this.$store.dispatch('teacherList/teacherModify', {
        teacherInfo:{
          simpleTeacherInfo:{
            teacherId:teacherRecord.teacherId,
            account:teacherRecord.account,
            name:teacherRecord.name,
            password:teacherRecord.password
          },
          phone:teacherRecord.phone,
          email:teacherRecord.e_mail
        },
        token:this.accessState.token
      }).then(()=>{
        this.$message.info("更新成功")
        this.$store.commit("teacherList/MODIFY_TEACHER_INFO",teacherRecord)
      }).catch(error=>{
        this.$message.error(error)
      })
    },

    //获取老师详细信息
    getTeacherInfo(key) {
      //调用接口
      this.$store.dispatch('teacherList/teacherInfo', {
        teacherId: key,
        token: this.accessState.token
      }).then(()=>{
        this.teacherRecord=this.teacherState.teacherInfo
        this.modalVisible=true
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    // 删除老师信息
    deleteTeacher(key) {
      this.$store.dispatch('teacherList/teacherDelete', {
        token:this.accessState.token,
        teacherId:key
      }).then(()=>{
        this.$message.info("操作成功")
        this.$store.commit("teacherList/DELETE_TEACHER",key)
        this.teacherData=this.teacherState.teacherRecord
        this.pagination.total=this.teacherState.teacherRecord.length
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    //查询按钮
    searchTeacherInfo() {
      let searchResult=this.teacherState.teacherRecord
      //console.log(searchResult)
      //当输入的内容为空时，点击Search可以获取数据列表
      if(this.inputAccount!==''){
        searchResult=searchResult.filter(n=>{
          return n.account.indexOf(this.inputAccount)!==-1
        })
      }
      if(this.inputName!==''){
        searchResult=searchResult.filter(n=>{
          return n.name.indexOf(this.inputName)!==-1
        })
      }
      this.teacherData=searchResult
      this.pagination.total=searchResult.length
    },
    // onResetSearch() {//重置按钮
    //   this.inputAccount = '';
    //   this.inputName = '';
    // },

    //批量删除点击事件
    onMassDeleteTeacher(){
      //console.log(this.selectedRowKeys)
      this.$store.dispatch('teacherList/massDeleteTeacher', {
        token:this.accessState.token,
        teacherIds:this.selectedRowKeys
      }).then(() => {
        this.$message.success('删除成功');
        //删除store的数据
        this.$store.commit("teacherList/MASS_DELETE_TEACHER",this.selectedRowKeys)
        this.teacherData=this.teacherState.teacherRecord
        this.pagination.total=this.teacherState.teacherRecord.length
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleOk() {
      this.modalVisible = false;
      this.visible = false;
    },
    handleCancel() {
      this.modalVisible = false;
      this.visible = false;
    },
    refreshPage(){
      // 重新刷新当前页面
      // console.log("刷新")
      this.searchTeacherInfo();
    }
  },
  computed: {
    ...mapState({ // 这个是提取store中access文件夹目录下的数据
      'teacherState': 'teacherList', // 获取store
      'accessState': 'access'
    }),
    rowSelection(){
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys=>{
          this.selectedRowKeys = selectedRowKeys;
        }
      }
    }
  },
  mounted() {
    //页面首次加载获取老师信息
    this.$store.dispatch('teacherList/getTeacherList',{
      token:this.accessState.token,
      collegeId:this.accessState.collegeId
    }).then(() => {
      this.teacherData = this.teacherState.teacherRecord
      this.pagination.total=this.teacherState.teacherRecord.length
    }).catch((err) => {
      this.$message.error(err.msg)
    })
  },
}
</script>
<style scoped>
</style>
